<template>
<div class="container">
  <div class="tab-box">
    <router-link replace :to="'/my'">
      <div class="tab-item" >我的</div>
    </router-link>
  </div>
  <div class="my-massage" style="margin-top:30px;">
    <img v-if="my_message&&my_message.icon" :src="my_message.icon" :alt="my_message.nickname">
    <span>{{my_message.nickname}}</span>
    <span style="margin-left:30px; margin-top:80px">粉丝:{{my_message.fans}}</span>
    <span style=" margin-top:80px">关注:{{my_message.followers}}</span>
  </div>
  <tabbar currentKey="my"/>
</div>
</template>
<script>
import tabbar from '@/components/tabbar'
import service from "@/utils/service"

export default {
  name: 'my',
  created(){
    this.getUser()
  },
  components: {
    tabbar
  },
  data(){
    return{
      my_message:{}
    }
  },
  methods:{
    async getUser(){
      let user=await service.get("json/my-message.json")
      this.my_message=user
    }
  }
}
</script>
<style scoped>
.tab-box{
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
}
.tab-item{
  margin-top: 10px;
  font-size: 20px;
  height: 30px;
  flex: 1;
  line-height: 30px;
  color: #707070;
  margin-left: 20px;
  text-align: center;
}
.router-link-active .tab-item{
  font-size: 22px;
  font-weight: 700;
}
.router-link-active .tab-item::after{
  content: '';
  display: block;
  border-bottom:solid #ff7d15 ;
}
.my-massage{
  display: flex;
  width: 90%;
  height: 150px;
  border-radius: 30px;
  margin: 0 auto;
  background-color: #fff;
}
.my-massage img{
  width: 80px;
  border-radius: 50%;
  margin-left: 20px;
  margin-top:20px ;
  height: 80px;
}
.my-massage span{
  display: block;
  color: #ff7d15;
}
.my-massage span:first-of-type{
  margin-top:20px ;
  font-size: 30px;
}
</style>